<template>
	<view class="mine">
		<u-sticky>
			<view class="banner">
				<view class="user" v-if="userinfo.id" @click="toEditUser">
					<u-image :src="userinfo.avatar" width="70" height="70" shape="square"></u-image>
					<text class="name">{{ userinfo.nickname }}</text>
				</view>
				<view v-else style="width: 300rpx;">
					<u-button text="点击登录" @click="login"></u-button>
				</view>
			</view>
		</u-sticky>
		<view class="func">
			<view class="func-item" v-for="(item,index) in menu" :key="index" v-if="item.status"
				@click="toPage(item)">
				<view class="func-item-left">
					<image class="func-icon" :src="item.icon" mode="aspectFill"></image>
					<text class="func-title">{{ item.name }}</text>
				</view>
				<view class="func-item-right">
					<u-icon name="arrow-right" size="16" color="#000"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		Extra,
		Login
	} from '@/static/utils/service.js'
	import {
		get,
		post
	} from '@/static/utils/request.js'
	import {
		Loading,
		Routes,
		Toast,
		WxBaseApi
	} from '@/static/utils/utils.js'
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/3.jpg',
				menu: []
			}
		},
		computed: {
			...mapState(['userinfo']),
		},
		onShow() {
			this.refreshUserinfo()
			this.getMenuStatus()
		},
		methods: {
			...mapActions(['refreshUserinfo']),
			toPage(e) {
				const url = `${e.url}?value=${e.value}`
				Routes.push(url)
			},
			toEditUser() {
				Routes.push('/pages/user/edit')
			},
			async getMenuStatus() {
				const res = await get(Extra.navigation)
				this.menu = res.data
			}
		}
	}
</script>

<style lang="scss">
	.mine {
		display: flex;
		flex-direction: column;

		.banner {
			height: 280rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f05948;

			.user {
				display: flex;
				flex-direction: column;
				align-items: center;

				/deep/.u-image__image {
					border-radius: 8rpx !important;
				}

				.name {
					margin-top: 10rpx;
					color: #fff;
				}
			}
		}

		.func {
			.func-item {
				padding: 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #f5f5f5;

				.func-item-left {
					display: flex;
					align-items: center;

					.func-icon {
						width: 32rpx;
						height: 32rpx;
					}

					.func-title {
						margin-left: 15rpx;
					}
				}

				.func-item-right {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>